<template>
  <div class="dashboard-panel-detail" id="menu-left-btn-xe652">
    <div class="pages-box">
      <div class="pages-left-child" :class="{ 'pages-left-close': !leftClose }">
        <div class="pages-left-child-item">
          <!-- <div class="flot-btn hw-click-cursor hw-flex-style-c-c" @click="leftClose = !leftClose">
            <t-icon name="caret-left-small" v-if="leftClose" />
            <t-icon name="caret-right-small" v-else />
          </div> -->
          <div class="page-heard hw-flex-style-b-c">
            <span>所属单位</span>
          </div>
          <div class="pages-left-content">
            <div class="card-item-parent" v-for="(item, index) in tabLists.companys" :key="item.id">
              <div
                @click="clickGroup(item.id, item.name, 1)"
                class="card-item hw-flex-style-c-c hw-click-cursor"
                :class="{
                  'chang-item-active': item.id == parmas.companyId,
                  'page-heards': index == tabList.companys?.length - 1,
                }"
              >
                <div class="card-item-left" v-if="item.name.length < 9">
                  <span>{{ item.name }}</span>
                </div>
                <t-popup
                  v-else
                  attach="#menu-left-btn-xe652"
                  overlayClassName="popup"
                  class="placement"
                  :content="item.name"
                  placement="top"
                  showArrow
                  destroyOnClose
                >
                  <div class="card-item-left">
                    <span>{{ item.name }}</span>
                  </div>
                </t-popup>
                <span class="card-item-rights">{{ item.total }}</span>
              </div>
            </div>
          </div>
          <div class="pages-left-content-border"></div>
          <div class="page-heard hw-flex-style-b-c">
            <span>策展大纲</span>
          </div>
          <div class="pages-left-content" v-if="tabLists.modules">
            <three :moduleLists="tabLists.modules" @editItem="clickGroup" />
            <!-- <div class="card-item-parent" v-for="item in tabLists.modules" :key="item.id">
              <div
                @click="clickGroup(item.id, item.name, 2)"
                class="card-item hw-flex-style-c-c hw-click-cursor"
                :class="{ 'chang-item-active': item.id == parmas.moduleId }"
              >
                <div class="card-item-left">{{ item.name }}</div>
                <span class="card-item-rights">{{ item.total }}</span>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="ages-right-child">
        <t-card class="dashboard-detail-card" :title="title" :bordered="false" :style="{ height: '100%' }">
          <!-- <template #actions>
            <div class="hw-flex-style-e-c">
              <button class="hw-btn-style2" @click="visible = true">
                <t-icon name="filter" />
                <span style="margin-left: 6px">筛选</span>
              </button>
              <button class="hw-btn-style hw-btn-style-page" @click="addaddExhibits()">添加展品</button>
            </div>
          </template> -->
          <div class="card__body-content">
            <div class="message-box">
              <i class="doorIcon"> &#xe640; </i>
              <span> 为此展览使用的展品库，可从单位展品库、平台逛展品等位置，给此展览添加专用展品。 </span>
            </div>
            <div class="heard-menu">
              <div class="heard-menu-left" v-if="userStore.userLevel == 2">
                <div class="menu-left-btn menu-left-btn1" @click="addexhibits">
                  <i class="doorIcon doorIconLeft">&#xe654;</i>
                  <span>录入展品</span>
                </div>
                <div class="menu-left-btn menu-left-btn2" id="menu-left-btn-byId">
                  <t-popup
                    attach="#menu-left-btn-byId"
                    overlayClassName="popup"
                    class="placement bottom"
                    content=""
                    placement="bottom"
                    showArrow
                    destroyOnClose
                  >
                    <template #content>
                      <div v-for="item in selectExbtion" :key="item.id">
                        <div
                          @click="openSlect(item.id)"
                          class="select-item"
                          v-if="item.id !== 2 || userStore.userLevel == 2"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </template>
                    <i class="doorIcon doorIconLeft">&#xe65e;</i>
                    <span>选择展品</span>
                    <i class="doorIcon doorIconLeft">&#xe63a;</i>
                  </t-popup>
                </div>

                <div
                  class="menu-left-btn menu-left-btn3"
                  id="menu-left-btn-xe652"
                  @click="moveSelect"
                  :style="{ borderColor: moveList.length > 0 ? 'rgba(230, 43, 23, 1)' : 'rgba(230, 43, 23, .5)' }"
                >
                  <t-popup
                    attach="#menu-left-btn-xe652"
                    overlayClassName="popup"
                    class="placement top"
                    content="关联至策展大纲"
                    placement="top"
                    showArrow
                    destroyOnClose
                  >
                    <i class="doorIcon doorIconLeft" :style="{ opacity: moveList.length > 0 ? '1' : '0.5' }"
                      >&#xe661;</i
                    >
                    <span :style="{ opacity: moveList.length > 0 ? '1' : '0.5' }">关联至</span>
                  </t-popup>
                </div>
                <!-- <div class="menu-left-btn menu-left-btn4">
                  <i class="doorIcon doorIconLeft">&#xe653;</i> 
                  <span>批量导入</span>
                </div>
                <a
                  class="load-item"
                  href="https://static-1316349889.cos.ap-shanghai.myqcloud.com/exhibitsZip/%E7%A7%81%E6%9C%89%E5%BA%93%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF%EF%BC%88%E4%B8%80%E6%99%AE%E6%A0%BC%E5%BC%8F%EF%BC%89.zip"
                >
                  <i class="doorIcon">&#xe656;</i>
                  <span>导入模板下载</span></a
                > -->
              </div>
              <div v-else></div>
              <div class="heard-menu-right">
                <seachInput @onEnterValue="onEnterInit" />
                <div class="dot-parent">
                  <div
                    class="dot"
                    v-if="
                      parmas.typeId !== 0 ||
                      parmas.ageId !== 0 ||
                      parmas.levelId !== 0 ||
                      parmas.IsAudio !== -1 ||
                      parmas.IsExternal !== -1
                    "
                  ></div>
                  <i class="doorIcon doorIconLeft" @click="visible = true">&#xe666;</i>
                </div>
              </div>
            </div>
            <div class="table-contents">
              <div class="box-scroll">
                <exhibitsTable
                  @addExhibit="addExhibitList"
                  :right="true"
                  :parmas="parmas"
                  :tabType="datas"
                  :tabDatas="tabDatas"
                  @remove="remove"
                />
              </div>
              <t-row style="margin-top: 20px">
                <t-col :span="12" v-if="total !== 0">
                  <t-pagination
                    v-model:current="parmas.pageNo"
                    v-model:pageSize="parmas.pageSize"
                    :total="total"
                    show-sizer
                    :show-page-size="true"
                    :page-size-options="pageSizeOptions"
                    @change="onChange"
                    @page-size-change="onPageSizeChange"
                    @current-change="onCurrentChange"
                  />
                </t-col>
              </t-row>
            </div>
          </div>
        </t-card>
      </div>
    </div>
    <drawer :tabType="datas" :visible="visible" @close="close" @Confirm="Confirm" />
    <div class="select-box">
      <t-dialog
        header="添加展品"
        :visible="visibleStep"
        :confirm-on-enter="true"
        :on-cancel="closetables"
        :on-close="closetables"
        :cancelBtn="null"
        :confirmBtn="null"
      >
        <template #body>
          <t-row :gutter="16" style="width: 100%">
            <t-col :span="12">
              <div class="hw-box-style-flex">
                <span>添加展品至:</span>
                <t-cascader
                  placeholder="请选择单元"
                  v-model="gruopId"
                  :options="moduleLists"
                  :keys="{
                    value: 'id',
                    children: 'children',
                    label: 'text',
                  }"
                  check-strictly
                  @change="onChange"
                />
              </div>
            </t-col>
          </t-row>
        </template>
        <template #footer>
          <t-button @click="visibleStep = false" theme="default" variant="outline">取消</t-button>
          <t-button @click="okStep">确定</t-button>
        </template>
      </t-dialog>

      <t-dialog
        header="关联展品"
        :visible="moveVisibleStep"
        :confirm-on-enter="true"
        :on-cancel="moveokStep"
        :on-close="closetables2"
        :cancelBtn="null"
        :confirmBtn="null"
      >
        <template #body>
          <t-row :gutter="16" style="width: 100%">
            <t-col :span="12">
              <div class="hw-box-style-flex">
                <span>移动展品至:</span>
                <t-cascader
                  placeholder="请选择单元"
                  v-model="moveGruopId"
                  :options="moduleLists"
                  :keys="{
                    value: 'id',
                    children: 'children',
                    label: 'text',
                  }"
                  check-strictly
                  @change="onChange"
                />
              </div>
            </t-col>
          </t-row>
        </template>
        <template #footer>
          <t-button @click="moveVisibleStep = false" theme="default" variant="outline">取消</t-button>
          <t-button @click="moveokStep">确定</t-button>
        </template>
      </t-dialog>
    </div>
    <div class="dialog-box">
      <t-dialog
        header="添加展品"
        v-if="visible1"
        :visible="visible1"
        :confirm-on-enter="true"
        :on-cancel="closetable"
        :on-close="closetable"
        :cancelBtn="null"
        :confirmBtn="null"
        :loading="loading"
      >
        <template #body>
          <addTable
            :isexbit="2"
            v-if="visible1"
            :heardType="selectId"
            @addExhibit="addExhibitArray"
            :right="false"
            :parmas="parmas"
            :tabType="datas"
            :tabDatas="[]"
          />
        </template>
        <!-- <template #body>
          <div class="dialog-body">
            <t-row>
              <t-col :span="4" style="height: 48px">
                <t-tabs v-model="modelParmas.type" @change="changeVlaue">
                  <t-tab-panel v-for="item in tabList" :key="item.value" :value="item.value" :label="item.title">
                  </t-tab-panel>
                </t-tabs>
              </t-col>

              <t-col :span="5" :offset="3" style="height: 48px">
                <div class="hw-box-end-box">
                  <div style="margin-right: 16px">
                    <t-input
                      @Enter="onEnter"
                      placeholder="请输入搜索内容"
                      style="width: 100%"
                      v-model="modelParmas.value"
                    >
                      <template #suffix-icon>
                        <SearchIcon @click="onEnter" />
                      </template>
                    </t-input>
                  </div>
                  <div>
                    <t-popup
                      :visible="popVisible"
                      :overlay-style="{ width: '45vw', minWidth: '608px' }"
                      destroy-on-close
                      trigger="click"
                      placement="left"
                    >
                      <template #content>
                        <popbox :tabType="datas" @close="popClose" @Confirm="popConfirm" />
                      </template>
                      <button class="hw-btn-style2" @click="popVisible = !popVisible">
                        <t-icon name="filter" />
                        <span style="margin-left: 6px">筛选</span>
                      </button>
                    </t-popup>
                  </div>
                </div>
              </t-col>
            </t-row>
            <exhibitsTable
              :right="false"
              @addExhibit="addExhibit"
              :parmas="parmas"
              :tabType="datas"
              :tabDatas="modelDatas"
            />
            <t-row style="margin-top: 24px">
              <t-col :span="12" v-if="modelTotal !== 0">
                <t-pagination
                  v-model="modelParmas.pageNo"
                  v-model:pageSize="modelParmas.pageSize"
                  :total="modelTotal"
                  show-sizer
                  :show-page-size="false"
                  @change="onChange"
                  @page-size-change="onPageSizeChange1"
                  @current-change="onCurrentChange1"
                />
              </t-col>
            </t-row>
          </div>
        </template> -->
        <template #footer>
          <span class="footer-btm-num">已选 {{ moduleId.length }} 条</span>
          <t-button @click="closetable" theme="default" variant="outline">取消</t-button>
          <t-button @click="ok">确定添加</t-button>
        </template>
      </t-dialog>
    </div>
    <addExbition
      v-if="editexbitionShow"
      :visible="editexbitionShow"
      :id="editexbitionId"
      @closeMdeol="closeMdeol"
      @addSuccess="addSuccess"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import addTable from './components/plan/addTable.vue';
import addExbition from '@/components/addExbition/addExbition.vue';
import seachInput from '@/components/seach/seach.vue';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { designList, exhibtNumber, addExhibits } from '@/api/desgin/desgin';
import { bindShowpieces } from '@/api/exhibit/exhibit';
import popbox from './components/exhibits/popbox.vue';
import three from './components/exhibits/three.vue';
import { tabList } from './data';
import drawer from './components/plan/drawer.vue';
import exhibitsTable from './components/exhibits/table.vue';
import { treeList } from '@/api/user/user';
import {
  enterpriseList,
  exhibitDisable,
  exhibitRecovery,
  exhibitMove,
  exhibitPublish,
  exhibitWithdrawn,
  showpieceRelate,
} from '@/api/exhibit/exhibit';
import { moduleList } from '@/api/desgin/desgin';
import { MessagePlugin } from 'tdesign-vue-next';
import { urls, getLinkUrl } from '@/utils/request/upload';
import { reactive, ref, computed, nextTick } from 'vue';
import { leftListAdmin, leftListAdmin1 } from './data';
import { number } from 'echarts/core';
import { useSettingStore, useUserStore } from '@/store';
const userStore = useUserStore();
const pageSizeOptions = [
  { label: '每页 10 条', value: 10 },
  { label: '每页 20 条', value: 20 },
  { label: '每页 50 条', value: 50 },
  { label: '每页 100 条', value: 100 },
];
const selectExbtion = [
  { id: 2, name: '从私有库选择' },
  { id: 1, name: '从公有库选择' },
  { id: 5, name: '从我的关注选择' },
];
const editexbitionShow = ref(false); //添加展品弹框
const moveVisibleStep = ref(false); //关联展品弹框
const editexbitionId = ref(0);
const selectId = ref(1);
const parmas = reactive({
  projectId: localStorage.getItem('projectId'),
  companyId: -1,
  moduleId: -1,
  typeId: 0,
  ageId: 0,
  levelId: 0,
  SourceId: 0,
  value: '',
  pageNo: 1,
  pageSize: 20,
  IsAudio: -1,
  IsExternal: -1,
});
const modelParmas = reactive({
  projectId: Number(localStorage.getItem('projectId')),
  value: '',
  pageNo: 1,
  pageSize: 20,
  typeId: 0,
  ageId: 0,
  levelId: 0,
  sourceId: 0,
  type: 1,
});
const tabLists = reactive({
  companys: [],
  modules: [],
});
const moduleId = ref([]);
const datas = reactive({
  select1: [], //级别
  select2: [], //来源
  select3: [], //类型
  select4: [], //年代
});
const seachShow = ref(false);
const gruopId = ref(-1);
const moveGruopId = ref(null);
const total = ref(0);
const modelTotal = ref(0);
const tabDatas = ref([]);
const modelDatas = ref([]);
const moduleLists = ref([]);
const cruuent = ref(-1);
const name = ref('');
const tabValue = ref(1);
const leftClose = ref(true);
const moveList = ref([]); //列表选择
const gorupInfo = reactive({
  name: '',
  id: 0,
  sort: null,
});

const visible = ref(false);
const visible1 = ref(false);
const popVisible = ref(false);
const visibleStep = ref(false);
const loading = ref(false);
const title = ref('展品');
const listMembers = ref([]);
const clickGroup = (e: number, str: string, type: number) => {
  if (type == 2) {
    parmas.moduleId = e;
    parmas.pageNo = 1;
  } else {
    parmas.companyId = e;
    parmas.pageNo = 1;
  }
  moveList.value = [];

  init();
  // title.value = str;
};
const initSelect = async () => {
  //初始化所有下拉选项
  let res = await treeList(371994471206981); //级别
  let res1 = await treeList(371996102197317); //来源
  let res2 = await treeList(371999507447877); //类型
  let res3 = await treeList(372051821408325); //年代
  datas.select1 = res.data;
  datas.select2 = res1.data;
  datas.select3 = res2.data;
  datas.select4 = res3.data;
};
const initList = async () => {
  try {
    let res = await moduleList(localStorage.getItem('projectId'));
    moduleLists.value = res.data;
    moduleLists.value.unshift({
      children: [],
      id: -1,
      level: 0,
      parentId: 0,
      remarks: null,
      text: '未在展览单元',
    });
    console.log(moduleLists.value);
  } catch {}
};
initList();
const moveSelect = () => {
  // 关联到其他策展大纲
  // console.log('move');
  if (moveList.value.length > 0) {
    moveVisibleStep.value = true;
  } else {
    MessagePlugin.warning('请选择展品');
  }
};
const addExhibitList = (ary: any) => {
  moveList.value = ary;
  console.log('move', moveList.value);
};
const initTab = async () => {
  try {
    let res = await exhibtNumber({ projectId: localStorage.getItem('projectId') });
    nextTick(() => {
      tabLists.companys = res.data.companys;
      tabLists.modules = res.data.modules;
      console.log(tabLists.companys, tabLists.modules);
    });
  } catch {}
};

const init = async () => {
  try {
    loading.value = true;
    let res = await designList(parmas);
    // if (res.data.data.length === 0) {
    //   parmas.pageNo = parmas.pageNo - 1;
    //   res = await designList(parmas);
    //   // parmas.pageNo = parmas.pageNo - 1;
    // }
    total.value = res.data.total;
    tabDatas.value = res.data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const initModel = async () => {
  try {
    loading.value = true;
    let { data } = await showpieceRelate(modelParmas.projectId, modelParmas);
    modelTotal.value = data.total;
    modelDatas.value = data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};

const changeVlaue = () => {
  initModel();
};
const close = () => {
  visible.value = false;
};
const Confirm = (info: any) => {
  console.log(info);
  parmas.typeId = info.typeId ? info.typeId : 0;
  parmas.ageId = info.ageId ? info.ageId : 0;
  parmas.levelId = info.LevelId ? info.LevelId : 0;
  parmas.IsAudio = info.IsAudio ? info.IsAudio : -1;
  parmas.IsExternal = info.IsExternal ? info.IsExternal : -1;
  // console.log(parmas);
  init();
  visible.value = false;
};
const addaddExhibits = () => {
  visible1.value = true;
  initModel();
};
const addExhibitArray = (e: Array<number>) => {
  //添加展品列表
  moduleId.value = e;
  // console.log(e);
};
const ok = async (): void => {
  if (moduleId.value.length > 0) {
    visible1.value = false;
    visibleStep.value = true;
  } else {
    MessagePlugin.error('请选择展品');
    return;
  }

  // visible1.value = false;
};
const onEnterInit = (e?: string) => {
  parmas.pageNo = 1;
  parmas.value = e;
  init();
};
const blur = () => {
  //输入框消失
  seachShow.value = false;
};
const okStep = async () => {
  try {
    if (loading.value) {
      return;
    }
    if (moduleId.value.length > 0) {
      loading.value = true;
      gruopId.value = gruopId.value == -1 ? 0 : gruopId.value;
      let res = await addExhibits(localStorage.getItem('projectId'), gruopId.value, moduleId.value);
      MessagePlugin.success('添加成功');
      moduleId.value = [];
      initTab();
      init();
      loading.value = false;
      visibleStep.value = false;
    } else {
      return;
    }
  } catch {
    loading.value = false;
  }
};
const moveokStep = async () => {
  try {
    if (loading.value) {
      return;
    }
    if (moveList.value.length > 0) {
      loading.value = true;
      let res = await bindShowpieces(localStorage.getItem('projectId'), 0, moveGruopId.value, moveList.value);
      MessagePlugin.success('添加成功');
      moveList.value = [];
      initTab();
      init();
      loading.value = false;
      moveVisibleStep.value = false;
    } else {
      return;
    }
  } catch {
    loading.value = false;
  }
};
const closetable = (context?: any): void => {
  visible1.value = false;
  modelParmas.typeId = 0;
  modelParmas.ageId = 0;
  modelParmas.levelId = 0;
  modelParmas.pageNo = 1;
};
const closetables = (context?: any): void => {
  visibleStep.value = false;
};
const closetables2 = () => {
  moveVisibleStep.value = false;
};

const onCurrentChange = (index, pageInfo) => {
  //分页事件
  init();
};
const onCurrentChange1 = (index, pageInfo) => {
  //分页事件
  initModel();
};
const popClose = () => {
  popVisible.value = false;

  popConfirm(undefined, undefined, undefined);
}; //浮动选择(取消)
const popConfirm = (typeId: number, ageId: number, levelId: number) => {
  modelParmas.typeId = typeId;
  modelParmas.ageId = ageId;
  modelParmas.levelId = levelId;
  modelParmas.pageNo = 1;
  initModel();

  popVisible.value = false;
}; //弹框选择确认
const onEnter = () => {
  modelParmas.pageNo = 1;
  initModel();
};
const onPageSizeChange = (size) => {
  init();
};
const onPageSizeChange1 = (size) => {
  initModel();
};

const onChange = (pageInfo) => {
  // console.log(gruopId.value);
};
const openSlect = (e: number) => {
  selectId.value = e;
  visible1.value = true;
};
const remove = () => {
  //移除展品操作
  init();
  initTab();
};
const addexhibits = () => {
  editexbitionId.value = 0;
  editexbitionShow.value = true;
};
const closeMdeol = () => {
  //展品添加弹框关闭
  editexbitionShow.value = false;
};
const addSuccess = async (id: number, type?: number) => {
  try {
    if (type) {
      editexbitionShow.value = false;
    } else {
      console.log(id);
      if (loading.value) {
        return;
      }

      loading.value = true;
      gruopId.value = gruopId.value == -1 ? 0 : gruopId.value;
      let res = await addExhibits(localStorage.getItem('projectId'), gruopId.value, [id]);

      initTab();
      init();
      loading.value = false;
      editexbitionShow.value = false;
    }
  } catch (err) {
    console.log(err);
    loading.value = false;
    editexbitionShow.value = false;
  }
  //展品添加弹框打开
};

initTab();

initSelect();
init();
</script>

<style lang="less" scoped>
@import '../../company/index.less';
.dashboard-panel-detail {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page-heard {
  height: 60px;
  padding: 16px 24px;
  box-shadow: none;
  span {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
  }
}
.page-heards {
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.pages-box {
  min-height: 100%;
  min-height: 85vh;
}
.hw-btn-style {
  margin-right: 12px;
}
.footer-btm-num {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 22px;
  margin-right: 16px;
}
.dialog-body {
  height: 100%;
  // overflow-y: auto;
}
.hw-btn-style2 {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.hw-box-style-flex {
  width: 100%;
  align-items: center;
  span {
    font-size: 14px;
    width: 100px;
  }
}
.box-scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: calc(100% - 64px);
  :deep(.table-content-box) {
    height: 100%;
  }
  :deep(.content-box) {
    height: 100%;
  }
  :deep(.table-box) {
    height: 100%;
  }
  :deep(.t-table) {
    height: 100%;
  }
  :deep(.t-table__content) {
    max-height: 100% !important;
  }
  // overflow-y: scroll;
  // max-height: 70vh;
  // :deep(.t-table__content) {
  //   max-height: calc(100vh - 400px) !important;
  // }
}

.t-row {
  margin: 0;
}
.t-col {
  display: flex;
  align-items: center;
}
.dialog-box {
  :deep(.t-dialog) {
    width: 75vw;
    // min-width: 1150px;
  }
  :deep(.t-tabs__nav-item.t-size-m) {
    height: 48px;
  }
}
.select-box {
  :deep(.t-dialog) {
    width: 75vw;
    // min-width: 1150px;
  }
}
.pages-left-child {
  position: relative;
  height: 100%;
  padding: 0;
  background: #ffffff;
  // box-shadow: inset -1px 0px 0px 0px #f0f0f0;

  border: none;
  width: 284px;
}
.pages-left-child-item {
  height: 100%;
  padding-bottom: 16px;
  // padding-bottom: 80px;
  overflow-y: scroll;
}
.pages-left-child-item::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.seach-boxs {
  position: relative;
  :deep(.t-input) {
    height: 36px;
  }
  .doorIcon {
    color: #141414 !important;
  }
}
.ages-right-child {
  overflow: hidden;
  padding: 16px 24px;
  margin: 0;
  height: 100%;
  border: none;
  border-left: 1px solid #f0f0f0;
}
.pages-left-content {
  padding: 0;
}
.pages-left-content-border {
  width: 236px;
  height: 16px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  margin: 0 auto;
}

.ages-right-child {
  :deep(.t-table) {
    border: none;
  }
  :deep(.t-table__empty) {
    border-bottom: none;
    // border-bottom: 1px solid #ddd;
  }
  :deep(.t-table__content) {
    // border: 1px solid #ddd;
    // border-bottom: none;
  }
}
.card-item-parent {
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
}
.card-item {
  display: flex;
  align-items: center;
  padding: 0px 48px;
  padding-right: 24px;
  width: 100%;
  height: 36px;
  border-radius: 0px;

  .card-item-left {
    max-width: 70%;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
    }
  }
  .card-item-rights {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
  }
  .item-num {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
  }
}
.card-item:hover {
  background: #ffece6;
  .card-item-left {
    color: #e62b17;
  }
}
.chang-item-active {
  background: #ffece6;
  .card-item-left {
    color: #e62b17;
  }
}
.chang-item-active:hover {
  background: #ffece6;
}
:deep(.t-table__th-cell-inner) {
  display: flex;
  align-items: center;
  height: 48px;
}
:deep(.t-card__header) {
  display: none;
}
:deep(.t-card__body) {
  padding: 0;
  height: 100%;
}
.card__body-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .table-contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 124px);
  }
}
.message-box {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 6px;
  background: #f5f5f5;
  margin-bottom: 16px;
  .doorIcon {
    font-size: 24px;
    color: rgba(230, 43, 23, 1);
    line-height: 24px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    margin-left: 8px;
  }
}

.heard-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.heard-menu-left {
  display: flex;
  align-items: center;
  .menu-left-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    height: 36px;
    line-height: 24px;

    border-radius: 4px;
    margin-right: 12px;
    .doorIcon {
      font-size: 16px;
    }
  }
  .menu-left-btn1 {
    width: 124px;
    background: #e62b17;
    span {
      color: #ffffff;
      margin-left: 8px;
    }
    .doorIcon {
      color: #ffffff;
    }
  }
  .menu-left-btn1:hover {
    background: #f2573f;
  }
  .menu-left-btn2,
  .menu-left-btn3,
  .menu-left-btn4 {
    border: 1px solid #e62b17;
    span {
      color: #e62b17;
    }
    .doorIcon {
      color: #e62b17;
    }
  }
  .menu-left-btn2:hover,
  .menu-left-btn3:hover,
  .menu-left-btn4:hover {
    background: #ffece6;
  }
  .menu-left-btn2 {
    width: 142px;
    span {
      margin: 0 8px;
    }
  }
  .menu-left-btn3 {
    width: 108px;
    span {
      margin-left: 8px;
    }
  }
  .menu-left-btn4 {
    width: 124px;
    span {
      margin-left: 8px;
    }
  }
}
.heard-menu-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .doorIcon {
    cursor: pointer;
    font-size: 24px;
    color: #141414;
  }
  .doorIconLeft {
    margin-left: 24px;
  }
}
.dot-parent {
  position: relative;
}
.dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 6px;
  background: #e62b17;
  border-radius: 50%;
}
.load-item {
  display: flex;
  align-items: center;
  line-height: 24px;
  font-size: 14px;
  margin-left: 16px;
  .doorIcon {
    font-size: 16px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 4px;
  }
}
.load-item:hover {
  color: #e62b17;
}

.select-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 200px;
  height: 36px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  padding: 0 16px;
}
.select-item:hover {
  background: #f5f5f5;
}
#menu-left-btn-xe652 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
:deep(.t-dialog__body) {
  padding: 0 24px;
}
:deep(.t-dialog__header) {
  height: 60px;
  box-shadow: none;
}
.t-col {
  // margin-bottom: 0;
}
#menu-left-btn-byId {
  :deep(.t-popup__content) {
    overflow: hidden;
    border-radius: 6px;
  }
}
.doorIcon:hover {
  color: #e62b17;
}
#menu-left-btn-xe652 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
#menu-left-btn-byId {
  :deep(.t-popup__content) {
    width: 200px;
    padding: 0;
    background: #fff;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #fff;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #fff;
  }
}
</style>
